// 顶部导航栏高度
$headerMenuHeight :var(--headerMenuHeight, 65px);
// 顶部导航栏背景颜色
$headerMenuBackground :var(--headerMenuBackground, rgba(0, 148, 242, 1));
// 顶部logo文字颜色
$headerLogoTextColor :var(--headerLogoTextColor, rgba(255, 255, 255, 1));
// 顶部一级菜单激活时文字颜色
$color :var(--color, rgba(0, 148, 242, 1));
// 顶部一级菜单激活时背景颜色
$firstMenuColor :var(--firstMenuColor, rgba(228, 243, 253, 1));
// 顶部一级菜单未激活时文字颜色
$headerMenuInactiveColor :var(--headerMenuInactiveColor, #fff);
// 顶部导航用户信息颜色
$headerUserInfoTextColor :var(--headerUserInfoTextColor, #fff);
// 搜索、重置按钮背景色
$searchOrResetButtonBgc:var(--searchOrResetButtonBgc, rgba(0, 148, 242, 1));
// 搜索、重置按钮划过时背景色
$searchOrResetButtonHoverBgc:var(--searchOrResetButtonHoverBgc, rgba(0, 148, 242, .5));



// 侧边栏样式
@mixin silder-style($silderMenuBgc, $activeMenuBgc, $activeMenuTextColor) {
    background-color: $silderMenuBgc !important;

    // 导航栏背景色
    .ivu-menu {
        background-color: $silderMenuBgc !important;
    }

    // 导航栏顶级目录颜色
    .ivu-menu-dark {
        .ivu-menu-item-active {
            background-color: $activeMenuBgc !important;
            border-left     : 0;
            color           : #fff !important;
        }

        &.ivu-menu-vertical {

            // ----------可展开组件样式----------
            // 展开时组件标题样式
            .ivu-menu-opened .ivu-menu-submenu-title {
                background-color: $silderMenuBgc !important;
            }

            // 划过展开时组件标题样式
            .ivu-menu-opened .ivu-menu-submenu-title:hover {
                background-color: $activeMenuBgc !important;
            }

            // ----------激活时样式----------
            // 最后一级激活时样式
            .ivu-menu-submenu .ivu-menu-item-active {
                background-color: $activeMenuBgc !important;
                border-left     : 0;
                color           : #fff !important;
            }

            //非最后一级激活时样式
            .ivu-menu-child-item-active>.ivu-menu-submenu-title {
                color: $activeMenuTextColor !important;
            }

            //---------非激活时样式----------
            // 最后一级、可展开组件样式
            .ivu-menu-item,
            .ivu-menu-submenu-title {
                padding         : 10px 15px 10px 30px;
                text-align      : left;
                border-top      : 1px solid #F3F3F3;
                color           : #515A6E ;
                background-color: $silderMenuBgc ;
            }

            // 划过可展开组件样式
            .ivu-menu-item:hover,
            .ivu-menu-submenu-title:hover {
                background-color: $activeMenuBgc !important;
                color           : #fff !important;
                border-left     : 0px
            }

            // 划过最后一级时样式
            .ivu-menu-submenu .ivu-menu-item:hover {
                border-left     : 0;
                color           : #fff !important;
                background-color: $activeMenuBgc !important;
            }
        }

        // 非顶级缩进设置
        .ivu-menu-item,
        .ivu-menu-submenu-title {
            font-weight    : 400 !important;
            // padding-left: 30px !important;
        }
    }

    //左侧导航栏收起状态下滑动|点击不显示下拉框
    .drop-wrapper {
        .ivu-select-dropdown {
            display: none !important;
        }
    }

    // 左侧导航栏收起状态下滑动|点击图标样式
    .side-menu-wrapper {
        .drop-wrapper {
            &>.ivu-dropdown {
                cursor: pointer;

                .ivu-dropdown-rel {
                    .drop-menu-span {
                        width        : 44px;
                        height       : 44px;
                        color        : $activeMenuTextColor;
                        border-radius: 12px;
                    }
                }
            }

            &>.ivu-dropdown:hover {
                cursor: pointer;

                .ivu-dropdown-rel {
                    .drop-menu-span {
                        border-radius   : 12px;
                        background-color: $activeMenuBgc !important;
                    }
                }
            }
        }
    }

    .silder-active-menu {
        width           : 44px;
        height          : 44px;
        color           : #fff !important;
        border-radius   : 12px;
        background-color: $activeMenuBgc !important;
    }
}

.ivu-layout-sider-children {
    @include silder-style(#fff, $color, $color);
}

// 侧边导航栏收起展开按钮展样式
#slider-toggle-btn {
    height     : 60px;
    line-height: 60px;
    text-align : left;

    i {
        margin-left: 30px;
        font-size  : 17px;
        color      : #C8CED9;
        cursor     : pointer;
    }
}

#silder-menu-hide {
    width           : 280px !important;
    height          : calc(100vh - 35px) !important;
    position        : fixed !important;
    top             : 35px !important;
    left            : 71px !important;
    z-index         : 1000000 !important;
    background-color: #fff !important;
}

// 详情页面边框粗细设置
.select_info {
    h3 {
        font-size: 13px !important;
    }

    .sele_div_text,
    .sele_div {
        border       : 1px solid #dddddd !important;
        border-bottom: 0 !important;
        border-left  : 0 !important;

        .select_title,
        .select_center_text,
        .select_center {
            border-top   : 0 !important;
            border-bottom: 0 !important;
            border-right : 0 !important;
        }

        &:last-child {
            border-bottom: 1px solid #dddddd !important;
        }
    }
}

// 颜色选择组件层级设置在
.home .but_list {
    z-index: 1 !important
}

// 添加弹框内容据右侧滚动条 5px
#addTableInfo {
    .app_div {
        padding-right: 10px;
    }
}

// 页面表格表头不加粗
.ivu-table-cell {
    span {
        font-weight: normal
    }
}

// 弹框全局居中
.vertical-center-modal {
    position : fixed;
    top      : 50%;
    left     : 50%;
    transform: translate(-50%, -50%);

    .ivu-modal {
        top: 0;
    }
}

// 表格操作列 按钮样式设置
.table_btn {
    button {
        //background-color: transparent !important
    }
}

